<template>
  <el-select
    v-model="model"
    placeholder="请选择商品类别"
    style="width: 200px"
    clearable
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { ref, onMounted, defineModel } from "vue";
import { useCommonStoreHook } from "@/store/modules/common";

const commonStore = useCommonStoreHook();
const options = ref([]);
const model = defineModel();

const emit = defineEmits();

const handleChange = (value) => {
  const label = options.value.find((item) => item.value === value)?.label;
  emit("changeLabel", { value, label });
};

onMounted(() => {
  commonStore
    .queryGoodsCategoryPage({
      current: 1,
      size: 1000,
    })
    .then((res) => {
      options.value = res.records.map((item) => ({
        label: item.categoryName,
        value: item.id,
      }));
    });
});
</script>
